<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>updata</title>
    <link rel="icon" href="img/p2.png">
    <style type="text/css">
        body {
            background: url('img/background.jpg') no-repeat;
            background-size: 100% 100%;
            background-attachment: fixed;
        }

        * {
            margin: 0;
            padding: 0;
            outline: none;
            box-sizing: border-box;
        }

        .wrapper {
            width: 400px;
            background-color: #fff;
            padding: 30px;
            /* box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); */

        }

        .wrapper .input-data {
            width: 100%;
            height: 40px;
            position: relative;
        }

        .wrapper .input-data input {
            width: 350px;
            height: 100%;
            border: none;
            border-bottom: 2px solid silver;
            font-size: 17px;
        }

        .input-data input:focus~label,
        .input-data input:valid~label {
            transform: translateY(-20px);
            font-size: 15px;
            color: #4158D0;
        }

        .wrapper .input-data label {
            position: absolute;
            bottom: 10px;
            left: 0;
            color: grey;
            pointer-events: none;
            transition: all 0.3s ease;
        }

        .wrapper .input-data .underline {
            position: absolute;
            bottom: 0px;
            height: 2px;
            width: 350px;
        }

        .input-data .underline:before {
            position: absolute;
            content: "";
            height: 100%;
            width: 100%;
            background: #4158D0;
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }

        .input-data input:focus~.underline:before,
        .input-data input:valid~.underline:before {
            transform: scaleX(1);
        }

        #login {
            background-color: #fff;
            width: 461px;
            position: relative;
            left: 50%;
            top: 50%;
            transform: translate(-50%);
            margin-bottom: 30px;
        }

        .h2 {
            text-align: center;
            padding-top: 80px;
            /* padding-bottom: 30px; */
        }

        #wrong {
            padding-top: 15px;
            padding-bottom: 25px;
            color: #be29cc;
        }

        .empty {
            padding-bottom: 25px;
        }

        #main {
            padding-left: 30px;
        }

        #next {
            position: relative;
            left: 50%;
            transform: translate(-60%);
            width: 82px;
            height: 82px;
            border-radius: 15px;
            background-color: white;
            border: 2px solid #666666;
        }

        a:link {
            color: #666666;
            text-decoration: none;
        }

        a:active {
            color: black;
            text-decoration: none;
        }

        a:visited {
            color: #666666;
            text-decoration: none;
        }

        a:hover {
            color: black;
            text-decoration: none;
        }

        #botton {
            position: fixed;
            bottom: 30px;
            left: 40px;
        }

        #botton a {
            margin-right: 10px;
        }

        #botton a:link {
            color: #F9F9F9A6;
        }

        #botton a:active {
            color: #F9F9F9A6;
        }

        #botton a:visited {
            color: #F9F9F9A6;
        }

        #botton a:hover {
            color: #F9F9F9A6;
        }

        #botton p {
            color: #F9F9F9A6;
        }

        #search {
            position: relative;
            left: 30%;
            transform: translate(-60%);
            width: 82px;
            height: 82px;
            border-radius: 15px;
            background-color: white;
            border: 2px solid #666666;
        }

        #delete {
            position: relative;
            left: 50%;
            transform: translate(-60%);
            width: 82px;
            height: 82px;
            border-radius: 15px;
            background-color: white;
            border: 2px solid #666666;
            margin-bottom: 100px;
        }
    </style>
</head>

<body>
    <div style="padding-top: 25px;padding-left: 20px;">
        <img src="img/logo.png" alt="">
    </div>
    <div id="login">
        <div class="h2">
            <h2>查找或删除</h2>
        </div>
        <div id='main'>
            <div id="wrong">
                <p id="wronginformation" style="text-align: center; padding-right: 25px;">
                    输入用户名,以查找密码<br>或<br>删除该用户数据<br>也可输入all清除所有数据
                </p>
            </div>
            <div class="wrapper">
                <div class="input-data">
                    <input type="text" required="" id="usename" />
                    <div class="underline"></div>
                    <label>用户名</label>
                </div>
                <div class="empty"></div>
            </div>
            <div style="height: 40px;">
            </div>
            <div>
                <button id="search">查找</button>
                <button id="delete">删除</button>
            </div>
        </div>
    </div>
    <div id="botton">
        <a href="" class="wgjy">支持</a>
        <a href="" class="wgjy">隐私政策</a>
        <a href="" class="wgjy">COOKIE&nbsp;偏好</a>
        <a href="" class="wgjy"></a>
        <P>&copy;2020&nbsp;xx游戏.版权所有</P>
    </div>
    <script>
        var search = document.querySelector('#search');
        var shan = document.querySelector('#delete');
        var input = document.querySelector('input')
        search.onclick = function () {
            if (input.value.length == 0) {
                alert('请输入用户名');
                return;
            }
            if (havename()) {
                var arr = [];
                arr = localStorage.getItem(usename.value).split(',')
                alert(arr[0]);
                return;
            } else if (input.value == 'all') {
                alert('这是第一个value\n' + localStorage.getItem(localStorage.key(0)));
            } else {
                alert('无此账号');
            }
        }
        shan.onclick = function () {
            if (input.value.length == 0) {
                alert('请输入用户名');
                return;
            }
            if (havename()) {
                localStorage.removeItem(input.value);
                alert('已删除' + input.value);
                return;
            }
            if (input.value == 'all') {
                localStorage.clear();
                alert('已删除所有数据');
                return;
            }
            alert('无此账号');
        }
        function havename() {
            return localStorage.hasOwnProperty(input.value);
        }
    </script>
</body>

</html>